<template>
    <div class="tab-title-page goods_list">
      <div class="common_form_search">
        <el-form ref="searchForm" :inline="true" :model="searchForm">
          <el-form-item label="订单ID">
            <el-input v-model="searchForm.order_id" placeholder="请输入订单ID" clearable />
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="searchForm.certName" placeholder="请输入姓名" clearable />
          </el-form-item>
          <el-form-item label="身份证">
            <el-input v-model="searchForm.certId" placeholder="请输入身份证" clearable />
          </el-form-item>
          <el-form-item label="联通产品名称">
            <el-input v-model="searchForm.goods" placeholder="请输入联通产品名称" clearable />
          </el-form-item>
          <el-form-item label="下单时间">
            <my-date-picker ref="myDatePicker" />
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" @click="search()">查询</el-button>
            <el-button size="small" @click="reset()">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-tabs v-model="activeName" class="flex-1 nav_tabs" @tab-click="handleClick">
        <el-tab-pane :label="`同步成功(${count.no_settle})`" name="1" />
        <el-tab-pane :label="`未同步(${count.settled})`" name="2" />
        <el-tab-pane :label="`未选号(${count.refuse_settle})`" name="3" />
      </el-tabs>
      <el-divider class="middle_divider" />
      <div class="child_page">
        <div class="flex align-center table-top-btns">
          <h5 class="flex align-center">
            <svg-icon style="margin-right: 15px" icon-class="list" :size="15" />数据列表
          </h5>
        </div>
        <el-table :data="tableData" border :row-class-name="rowStyle" v-show="tableData.length > -1">
          <el-table-column align="center" prop="id" label="ID"/>
          <el-table-column align="center" prop="order_id" label="订单ID"/>
          <el-table-column align="center" prop="goods" label="联通产品名称"/>
          <el-table-column align="center" prop="certId" label="身份证"/>
          <el-table-column align="center" prop="certName" label="姓名"/>
          <el-table-column align="center" prop="mobile" label="手机号码"/>
          <el-table-column align="center" prop="phoneNum" label="预占号码"/>
          <el-table-column align="center" prop="create_time" label="下单时间"/>
          <el-table-column align="center" label="状态">
            <template slot-scope="scope">
              {{ scope.row.stutas_remark }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="风控结果">
            <template slot-scope="scope">
              {{ scope.row.status_2==1?'通过':'不通过' }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="京东物流覆盖结果">
            <template slot-scope="scope">
              {{ scope.row.status_3==1?'通过':'不通过' }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="签署协议结果">
            <template slot-scope="scope">
              {{ scope.row.status_4==1?'通过':'不通过' }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="remark" label="备注"/>
          <el-table-column  v-if="(activeName==1)" align="center" fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="checkLogistics(scope.row.order_id)">查看物流</el-button>
            </template>
          </el-table-column>
        </el-table>
        <custom-page ref="customPage" :total="total" @getList="getList" />
      </div>
      <check-logistics ref="checkLogistics" :order-id="selectedId" />
    </div>
  </template>
  
  <script>
  import { unicomLists,unicomExpressTrace } from '@/api/data'
  import customPage from '@/components/customPage'
  import myDatePicker from '@/components/myDatePicker'
  import checkLogistics from './checkLogistics'
  export default {
    components: { customPage, myDatePicker, checkLogistics },
    data() {
      return {
        searchForm: {
          order_id: '',
          certName: '',
          certId: '',
          goods: '',
          // status: '1',
          start_time: '',
        },
        activeName:'1',
        count: {
          no_settle: 0,
          settled: 0,
          refuse_settle: 0
        },
        selectedId:'',
        statusList: [
          { value: 1, label: '同步成功' },
          { value: 2, label: '未同步' },
          { value: 3, label: '未选号' }
        ],
        total: 0,
        tableData: []
      }
    },
    methods: {
      checkLogistics(item){
        this.selectedId = item
        this.$refs.checkLogistics.dialogVisible = true
      },
      // 获取数据
      getList(flag) {
        // flag为true, 则不刷新表格
        const { page, pageSize } = this.$refs.customPage
        if (!flag) {
          this.tableData = []
        }
        unicomLists({
          page,
          pageSize,
          ...this.searchForm,
          status:this.activeName
        }).then((res) => {
          this.tableData = res.data || []
          this.total = res.total
          // for (const key in this.count) {
          //   this.count[key] = res.count[key]
          // }
        })
      },
      // 查询
      search() {
        const pickerVal_start = this.$refs.myDatePicker.getVal()
        if (pickerVal_start !== 'error') {
          this.searchForm.start_time = pickerVal_start
        }
        this.$refs.customPage.page = 1
        this.getList()
      },
      // 重置
      reset() {
        if (this.$refs.myDatePicker) {
          this.$refs.myDatePicker.reset()
        }
        this.searchForm = {
          order_id: '',
          certName: '',
          certId: '',
          goods: '',
        }
        this.getList()
      },
      handleClick(tab) {
        // this.searchForm.status = tab.name
        this.activeName=tab.name
        this.$refs.customPage.page = 1
        this.getList()
      },
    },
    mounted() {
      this.getList()
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .el-button--warning.is-plain {
    color: #ff9f38;
    background: #fff;
    border-color: #ff9f38;
  }
  
  .el-icon-upload2 {
    font-size: 18px;
  }
  
  .dialog {
    text-align: center;
  }
  
  .goods_info {
    .info {
      margin-left: 10px;
  
      p {
        color: #666666;
      }
  
      p:first-child {
        color: #999999;
      }
    }
  }
  
  .activity {
    line-height: 24px;
  
    span {
      width: 20px;
      height: 20px;
      margin-left: 10px;
    }
  }
  
  .child_page {
    padding: 30px;
  }
  
  .common_form_search {
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
    background-color: #ffffff;
    border-bottom: 1px solid #eeeeee;
  }
  </style>
  